import { Button, Checkbox, Form, Input, Card, Row, Col, Spin } from "antd";
import React from "react";
import './index.less'
import {connect} from 'react-redux'
import {userLoginAsync} from '../../action/index'

const Login = (props) => {
  const onFinish = (values) => {
    console.log("Success:", values);
    props.userLoginAsync(values,props.history) //触发异步action
  };

  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };

  return (
    <Row className="login-cont" align="middle">
      <Col span={8} offset={8}>
        <Spin spinning={props.user.isLoading}>
          <Card title="请登录" extra={<a href="#">More</a>}>
            <Form
              name="basic"
              labelCol={{
                span: 4,
              }}
              wrapperCol={{
                span: 20,
              }}
              initialValues={{
                remember: true,
                username:'张三丰',
                password:'123'
              }}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              autoComplete="off"
            >
              <Form.Item
                label="账号"
                name="username"
                rules={[
                  {
                    required: true,
                    message: "请输入账号",
                  },
                ]}
              >
                <Input />
              </Form.Item>

              <Form.Item
                label="密码"
                name="password"
                rules={[
                  {
                    required: true,
                    message: "请输入密码!",
                  },
                ]}
              >
                <Input.Password />
              </Form.Item>

              <Form.Item
                name="remember"
                valuePropName="checked"
                wrapperCol={{
                  offset: 8,
                  span: 16,
                }}
              >
                <Checkbox>记住密码</Checkbox>
              </Form.Item>

              <Form.Item
                wrapperCol={{
                  offset: 8,
                  span: 16,
                }}
              >
                <Button type="primary" htmlType="submit">
                  登录
                </Button>
              </Form.Item>
            </Form>
          </Card>
        </Spin>
      </Col>
    </Row>
  );
};

export default connect(({user})=>({user}),{userLoginAsync})(Login);
